<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <title>站酷首页</title>
</head>

<body>
    <script src="./js/data.js"></script>
    <!-- logo wrap -->
    <div id="logo">
        <div class="logo_wrap">
            <h1 class="logo_picture">
                <a href="#"><img src="https://static.zcool.cn/git_z/z/common/images/svg/logo.svg" alt=""></a>
            </h1>
            <ul class="nav">
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">发现</a>
                    <div class="found">
                        <ul>
                            <li><a href="#">平面</a></li>
                            <li>|</li>
                            <li><a href="#">UI</a></li>
                            <li>|</li>
                            <li><a href="#">网页</a></li>
                            <li>|</li>
                            <li><a href="#">插图</a></li>
                            <li>|</li>
                            <li><a href="#">动漫</a></li>
                            <li>|</li>
                            <li><a href="#">摄影</a></li>
                            <li>|</li>
                            <li><a href="#">空间</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">工业/产品</a></li>
                            <li>|</li>
                            <li><a href="#">三维</a></li>
                            <li>|</li>
                            <li><a href="#">影视</a></li>
                            <li>|</li>
                            <li><a href="#">手工艺</a></li>
                            <li>|</li>
                            <li><a href="#">纯艺术</a></li>
                            <li>|</li>
                            <li><a href="#">服装</a></li>
                            <li>|</li>
                            <li><a href="#">其他</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">精选文章&nbsp;&nbsp;&nbsp;></a></li>
                            <li><a href="#">精选作品 &nbsp;&nbsp;&nbsp;></a></li>
                            <li><a href="#">精选收藏 &nbsp;&nbsp;&nbsp;></a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">职位</a>
                    <div class="positions">
                        <ul>
                            <li><a href="#">职位</a></li>
                            <li><a href="#">公司</a></li>
                            <li><a href="#">+发布职位</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">活动</a>
                    <div class="active">
                        <ul>
                            <li><a href="#">设计大赛</a></li>
                            <li><a href="#">专题策划</a></li>
                            <li><a href="#">线上活动</a></li>
                            <li><a href="#">线下活动</a></li>
                            <li><a href="#">学习音频</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">正版素材</a>
                    <div class="material">
                        <ul>
                            <li><a href="#">图片</a></li>
                            <li><a href="#">视频</a></li>
                            <li><a href="#">字体</a></li>
                            <li><a href="#">音乐</a></li>
                            <li><a href="#">我要供图</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">课程</a>
                    <div class="coures">
                        <ul>
                            <li><a href="#">免费直播周周见</a></li>
                            <li><a href="#">正在热销</a></li>
                            <li><a href="#">口碑好课</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">版权保护</a>
                    <div class="copyright">
                        <ul>
                            <li><a href="#">区块链存证</a></li>
                            <li><a href="#">作品登录证书</a></li>
                            <li><a href="#">版权维护</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">...</a>
                    <div class="points">
                        <ul>
                            <li><a href="#">设计师</a></li>
                            <li><a href="#">榜单</a></li>
                            <li><a href="#">站酷APP</a></li>
                            <li><a href="#">站酷书库</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="login">

            </div>
        </div>
    </div>
    <!-- head wrap -->
    <div id="head">
        <!-- banner wrap -->
        <div class="banner_wrap">
            <span id="prev_btn"><a><</a></span> 
            <span id="next_btn"><a>></a></span>
            <ul id="container">

            </ul>
        </div>
        <!-- advert wrap -->
        <div class="advert_wrap">
            <ul class="advert_container">

            </ul>
        </div>
        <!-- subnav wrap -->
        <div class="subnav_wrap">
            <ul class="subnav_container">
                <li><a href="#">首页推荐</a></li>
                <li><a href="#">最新发布</a></li>
            </ul>
        </div>
    </div>
    <!-- body wrap -->
    <div id="body">
        <!-- card wrap -->
        <div class="card_wrap">
            
        </div>
        <!-- choose wrap -->
        <div class="choose_wrap">
            <ul class="choose_container">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">99</a></li>
                <li><a href="#">100</a></li>
                <li><a href="#">></a></li>
            </ul>
        </div>
        <div class="picture">
            <a href="#"><img src="https://reviveimg.hellorf.com/www/images/9901b531071d04f2566f4455835dbec5.jpg" alt=""></a>
        </div>
        <!-- banner card wrap -->
        <div class="banner_card_wrap">
            <h2>
                <span>推荐课程</span>
                <span id="banner_card_btn">换一换</span>
            </h2>
            <ul class="banner_card_container">
                
            </ul>
        </div>
        <!-- back to top wrap -->
        <div class="back_wrap">
            <div class="back_top">
                ^
            </div>
        </div>
    </div>
    <!-- foot wrap -->
    <div id="foot">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./js/utils.js"></script>
</body>
</html>